<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/facePrint.js"></script>
    <script src="lib/testHelper.js"></script>
    <script src="lib/draggable.js"></script>
    <link rel="stylesheet" href="lib/reset.css">
</head>
<body>
<style>
    h1 {
        line-height: 60px;
        height: 60px;
        background: #146402;
        text-align: center;
        font-weight: bold;
        color: #eee;
        font-size: 14px;
    }

    .chart {
        height: 300px;
    }
</style>

<div class="chart" id="plain"></div>
<h1>No scroll, width 300, right: 10</h1>
<div class="chart" id="plain2"></div>
<h1>No scroll, has '\n' after 'line3', bottom: 20</h1>
<div class="chart" id="plain3"></div>
<h1>No scroll, vertical, has '\n' after 'line3', right 20</h1>
<div class="chart" id="plain-v"></div>
<h1>No scroll, vertical, top 'middle', left: 20, heigth: 150</h1>
<div class="chart" id="plain-v2"></div>
<h1>Scroll</h1>
<div class="chart" id="scroll"></div>
<h1>Scroll auto: try to change window size (width: 80%, right: 30)</h1>
<div class="chart" id="scroll-auto"></div>
<h1>Scroll auto: left: 30, right: 30, bottom: 0, position: 'start'</h1>
<div class="chart" id="scroll-lr"></div>
<h1>Scroll vertically</h1>
<div class="chart" id="scroll-v"></div>
<h1>Scroll vertically, left: 10, top: 'center', position: 'start', height: 50% (Turn the second page and resize it until
    page button disappear)</h1>
<div class="chart" id="scroll-v2"></div>

<div id="legendHoverLink"></div>
<div id="multi-pie"></div>
<div id="icon-circle"></div>
<div id="only-single-item"></div>
<div id="vary-size"></div>
<div id="index-to-no-name"></div>

<script>

    function makeSeries(seriesCount, categoryCount) {
        var series = [];
        var legendData = [];
        var xAxisData = [];

        for (var j = 0; j < categoryCount; j++) {
            xAxisData.push('category' + j);
        }

        for (var i = 0; i < seriesCount; i++) {
            var data = [];
            for (var j = 0; j < categoryCount; j++) {
                data.push(+(Math.random() + 0.5).toFixed(3));
            }
            var seriesName = 'line' + i;
            series.push({
                name: seriesName,
                type: 'line',
                stack: 'all',
                symbol: 'circle',
                symbolSize: 10,
                data: data,
                step: 'end'
            });
            legendData.push(seriesName);
        }

        return {
            series: series,
            legendData: legendData,
            xAxisData: xAxisData
        }
    }
</script>


<script>
    require([
        'echarts',
        // 'echarts/chart/line',
        // 'echarts/component/title',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoomInside',
        // 'zrender/svg/svg'
    ], function (echarts) {

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        for (var i = 0; i < 100; i++) {
            xAxisData.push('类目' + i);
            if (i < 5 && i > 1) {
                data1.push(0);
            } else {
                data1.push(+(Math.random() + 0.5).toFixed(3));
            }
            data2.push(+(Math.random() + 0.5).toFixed(3));
            data3.push(+(Math.random() + 0.5).toFixed(3));
        }

        var seriesInfo = makeSeries(5, 3);

        var option = {
            legend: {
                selector: true,
                selectorLabel: {
                    color: 'yellow',
                    borderColor: 'green',
                    backgroundColor: 'blue'
                },
                emphasis: {
                    selectorLabel: {
                        backgroundColor: 'red'
                    }
                },
                data: seriesInfo.legendData,
                // backgroundColor: 'rgba(0,100,50,0.2)'
            },
            tooltip: {},
            xAxis: {
                data: seriesInfo.xAxisData
            },
            yAxis: {
                splitArea: {
                    show: true
                }
            },
            series: seriesInfo.series
        };

        testHelper.create(echarts, 'plain', {
            title: [
                'No scroll, left not set (should be center)',
                'color: yellow, borderColor: green, backgroundColor: blue, emphasis backgroundColor: red'
            ],
            option: option
        });
    })
</script>


<script>
    require([
        'echarts',
        // 'echarts/chart/line',
        // 'echarts/component/title',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoomInside',
        // 'zrender/svg/svg'
    ], function (echarts) {

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        for (var i = 0; i < 100; i++) {
            xAxisData.push('类目' + i);
            if (i < 5 && i > 1) {
                data1.push(0);
            } else {
                data1.push(+(Math.random() + 0.5).toFixed(3));
            }
            data2.push(+(Math.random() + 0.5).toFixed(3));
            data3.push(+(Math.random() + 0.5).toFixed(3));
        }

        var seriesInfo = makeSeries(10, 3);

        var option = {
            legend: {
                right: 10,
                width: 300,
                selector: true,
                data: seriesInfo.legendData,
                backgroundColor: 'rgba(0,100,50,0.2)'
            },
            tooltip: {},
            grid: {
                top: 100,
            },
            xAxis: {
                data: seriesInfo.xAxisData
            },
            yAxis: {
                splitArea: {
                    show: true
                }
            },
            series: seriesInfo.series
        };

        testHelper.createChart(echarts, 'plain2', option);
    })
</script>


<script>
    require([
        'echarts',
        // 'echarts/chart/line',
        // 'echarts/component/title',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoomInside',
        // 'zrender/svg/svg'
    ], function (echarts) {

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        for (var i = 0; i < 100; i++) {
            xAxisData.push('类目' + i);
            if (i < 5 && i > 1) {
                data1.push(0);
            } else {
                data1.push(+(Math.random() + 0.5).toFixed(3));
            }
            data2.push(+(Math.random() + 0.5).toFixed(3));
            data3.push(+(Math.random() + 0.5).toFixed(3));
        }

        var seriesInfo = makeSeries(10, 3);
        seriesInfo.legendData.splice(4, 0, '\n');

        var option = {
            legend: {
                bottom: 20,
                selector: true,
                data: seriesInfo.legendData,
                backgroundColor: 'rgba(0,100,50,0.2)'
            },
            tooltip: {},
            grid: {
                bottom: 100
            },
            xAxis: {
                data: seriesInfo.xAxisData
            },
            yAxis: {
                splitArea: {
                    show: true
                }
            },
            series: seriesInfo.series
        };

        testHelper.createChart(echarts, 'plain3', option);
    })
</script>


<script>
    require([
        'echarts',
        // 'echarts/chart/line',
        // 'echarts/component/title',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoomInside',
        // 'zrender/svg/svg'
    ], function (echarts) {

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        for (var i = 0; i < 100; i++) {
            xAxisData.push('类目' + i);
            if (i < 5 && i > 1) {
                data1.push(0);
            } else {
                data1.push(+(Math.random() + 0.5).toFixed(3));
            }
            data2.push(+(Math.random() + 0.5).toFixed(3));
            data3.push(+(Math.random() + 0.5).toFixed(3));
        }

        var seriesInfo = makeSeries(20, 3);
        seriesInfo.legendData.splice(4, 0, '\n');

        var option = {
            legend: {
                orient: 'vertical',
                right: 20,
                selector: true,
                data: seriesInfo.legendData,
                backgroundColor: 'rgba(0,100,50,0.2)'
            },
            tooltip: {},
            grid: {
                right: 240
            },
            xAxis: {
                data: seriesInfo.xAxisData
            },
            yAxis: {
                splitArea: {
                    show: true
                }
            },
            series: seriesInfo.series
        };

        testHelper.createChart(echarts, 'plain-v', option);
    })
</script>


<script>
    require([
        'echarts',
        // 'echarts/chart/line',
        // 'echarts/component/title',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoomInside',
        // 'zrender/svg/svg'
    ], function (echarts) {

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        for (var i = 0; i < 100; i++) {
            xAxisData.push('类目' + i);
            if (i < 5 && i > 1) {
                data1.push(0);
            } else {
                data1.push(+(Math.random() + 0.5).toFixed(3));
            }
            data2.push(+(Math.random() + 0.5).toFixed(3));
            data3.push(+(Math.random() + 0.5).toFixed(3));
        }

        var seriesInfo = makeSeries(20, 3);

        var option = {
            legend: {
                orient: 'vertical',
                left: 20,
                top: 'center',
                selector: true,
                height: 150,
                data: seriesInfo.legendData,
                backgroundColor: 'rgba(0,100,50,0.2)'
            },
            tooltip: {},
            grid: {
                left: 280
            },
            xAxis: {
                data: seriesInfo.xAxisData
            },
            yAxis: {
                splitArea: {
                    show: true
                }
            },
            series: seriesInfo.series
        };

        testHelper.createChart(echarts, 'plain-v2', option);
    })
</script>


<script>
    require([
        'echarts',
        // 'echarts/chart/line',
        // 'echarts/component/title',
        // 'echarts/component/legendScroll',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoomInside',
        // 'zrender/svg/svg'
    ], function (echarts) {

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        for (var i = 0; i < 100; i++) {
            xAxisData.push('类目' + i);
            if (i < 5 && i > 1) {
                data1.push(0);
            } else {
                data1.push(+(Math.random() + 0.5).toFixed(3));
            }
            data2.push(+(Math.random() + 0.5).toFixed(3));
            data3.push(+(Math.random() + 0.5).toFixed(3));
        }

        var seriesInfo = makeSeries(50, 3);

        var option = {
            legend: [{
                type: 'scroll',
                selector: true,
                data: seriesInfo.legendData,
                backgroundColor: 'rgba(0,100,50,0.2)'
            }, {
                type: 'scroll',
                bottom: 0,
                selector: true,
                data: seriesInfo.legendData,
                backgroundColor: 'rgba(0,100,50,0.2)',
                pageButtonPosition: 'start'
            }],
            tooltip: {},
            grid: {
                left: 280
            },
            xAxis: {
                data: seriesInfo.xAxisData
            },
            yAxis: {
                splitArea: {
                    show: true
                }
            },
            series: seriesInfo.series
        };

        testHelper.createChart(echarts, 'scroll', option, {draggable: true});
    })
</script>


<script>
    require([
        'echarts',
        // 'echarts/chart/line',
        // 'echarts/component/title',
        // 'echarts/component/legendScroll',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoomInside',
        // 'zrender/svg/svg'
    ], function (echarts) {

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        for (var i = 0; i < 100; i++) {
            xAxisData.push('类目' + i);
            if (i < 5 && i > 1) {
                data1.push(0);
            } else {
                data1.push(+(Math.random() + 0.5).toFixed(3));
            }
            data2.push(+(Math.random() + 0.5).toFixed(3));
            data3.push(+(Math.random() + 0.5).toFixed(3));
        }

        var seriesInfo = makeSeries(5, 3);

        var option = {
            legend: {
                type: 'scroll',
                width: '80%',
                right: 30,
                selector: true,
                data: seriesInfo.legendData,
                pageIconSize: 50,
                pageIconColor: 'red',
                pageIconInactiveColor: 'green',
                backgroundColor: 'rgba(0,100,50,0.2)',
                pageTextStyle: {
                    color: 'yellow',
                    fontSize: 22
                }
            },
            tooltip: {},
            grid: {
                left: 280
            },
            xAxis: {
                data: seriesInfo.xAxisData
            },
            yAxis: {
                splitArea: {
                    show: true
                }
            },
            series: seriesInfo.series
        };

        testHelper.createChart(echarts, 'scroll-auto', option, {draggable: true, width: 400});
    })
</script>


<script>
    require([
        'echarts',
        // 'echarts/chart/line',
        // 'echarts/component/title',
        // 'echarts/component/legendScroll',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoomInside',
        // 'zrender/svg/svg'
    ], function (echarts) {

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        for (var i = 0; i < 100; i++) {
            xAxisData.push('类目' + i);
            if (i < 5 && i > 1) {
                data1.push(0);
            } else {
                data1.push(+(Math.random() + 0.5).toFixed(3));
            }
            data2.push(+(Math.random() + 0.5).toFixed(3));
            data3.push(+(Math.random() + 0.5).toFixed(3));
        }

        var seriesInfo = makeSeries(55, 3);

        var option = {
            legend: {
                type: 'scroll',
                bottom: 0,
                right: 30,
                left: 30,
                data: seriesInfo.legendData,
                selector: true,
                pageIconSize: 5,
                pageIconColor: 'red',
                pageIconInactiveColor: 'green',
                backgroundColor: 'rgba(0,100,50,0.2)',
                pageButtonPosition: 'start',
                pageButtonGap: 20,
                pageTextStyle: {
                    fontSize: 9
                }
            },
            tooltip: {},
            grid: {
                left: 280
            },
            xAxis: {
                data: seriesInfo.xAxisData
            },
            yAxis: {
                splitArea: {
                    show: true
                }
            },
            series: seriesInfo.series
        };

        testHelper.createChart(echarts, 'scroll-lr', option, {draggable: true, width: 400});
    })
</script>


<script>
    require([
        'echarts',
        // 'echarts/chart/line',
        // 'echarts/component/title',
        // 'echarts/component/legendScroll',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoomInside',
        // 'zrender/svg/svg'
    ], function (echarts) {

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        for (var i = 0; i < 100; i++) {
            xAxisData.push('类目' + i);
            if (i < 5 && i > 1) {
                data1.push(0);
            } else {
                data1.push(+(Math.random() + 0.5).toFixed(3));
            }
            data2.push(+(Math.random() + 0.5).toFixed(3));
            data3.push(+(Math.random() + 0.5).toFixed(3));
        }

        var seriesInfo = makeSeries(55, 3);

        var option = {
            legend: {
                type: 'scroll',
                orient: 'vertical',
                selector: true,
                bottom: 0,
                right: 30,
                data: seriesInfo.legendData
            },
            tooltip: {},
            grid: {
                right: 180
            },
            xAxis: {
                data: seriesInfo.xAxisData
            },
            yAxis: {
                splitArea: {
                    show: true
                }
            },
            series: seriesInfo.series
        };

        testHelper.createChart(echarts, 'scroll-v', option, {draggable: true, width: 400});
    })
</script>


<script>
    require([
        'echarts',
        // 'echarts/chart/line',
        // 'echarts/component/title',
        // 'echarts/component/legendScroll',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/dataZoomInside',
        // 'zrender/svg/svg'
    ], function (echarts) {

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        for (var i = 0; i < 100; i++) {
            xAxisData.push('类目' + i);
            if (i < 5 && i > 1) {
                data1.push(0);
            } else {
                data1.push(+(Math.random() + 0.5).toFixed(3));
            }
            data2.push(+(Math.random() + 0.5).toFixed(3));
            data3.push(+(Math.random() + 0.5).toFixed(3));
        }

        var seriesInfo = makeSeries(5, 3);

        var option = {
            legend: {
                type: 'scroll',
                orient: 'vertical',
                selector: true,
                top: 'middle',
                left: 10,
                height: '50%',
                borderColor: '#819356',
                borderWidth: 2,
                borderRadius: 4,
                data: seriesInfo.legendData,
                pageButtonPosition: 'start'
            },
            tooltip: {},
            grid: {
                left: 180
            },
            xAxis: {
                data: seriesInfo.xAxisData
            },
            yAxis: {
                splitArea: {
                    show: true
                }
            },
            series: seriesInfo.series
        };

        testHelper.createChart(echarts, 'scroll-v2', option, {draggable: true, width: 400});
    })
</script>


<script>

    var chart;
    var myChart;
    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        var option = {
            tooltip: {},
            legend: {
                data: ['AAA']
            },
            xAxis: {
                data: ['A', 'B', 'C']
            },
            yAxis: {},
            grid: {
                right: '50%'
            },
            series: [
                {
                    name: 'AAA',
                    type: 'bar',
                    data: [12, 33, 11]
                },
                {
                    name: 'AAA',
                    type: 'pie',
                    legendHoverLink: false,
                    center: ['75%', '50%'],
                    label: {
                        show: false,
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    data: [
                        {value: 0, name: 'A'},
                        {value: 367, name: 'B'},
                        {value: 20, name: 'C'}
                    ]
                }
            ]
        }

        chart = myChart = testHelper.create(echarts, 'legendHoverLink', {
            title: 'legendHoverLink is disabled on pie',
            option: option
        });
    });

</script>


<script>

    var chart;
    var myChart;
    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        var option = {
            tooltip: {},
            legend: {
                data: ['a', 'b', 'c'],
                selector: true
            },
            series: [
                {
                    name: 'AAA',
                    type: 'pie',
                    center: ['75%', '50%'],
                    radius: '30%',
                    data: [
                        {name: 'a', value: 12},
                        {name: 'b', value: 34},
                        {name: 'c', value: 56}
                    ]
                },
                {
                    name: 'BBB',
                    type: 'pie',
                    center: ['25%', '50%'],
                    radius: '30%',
                    data: [
                        {name: 'a', value: 12},
                        {name: 'b', value: 34},
                        {name: 'c', value: 56}
                    ]
                }
            ]
        }

        chart = myChart = testHelper.create(echarts, 'multi-pie', {
            title: 'Hover legend, the segments of BOTH pie should be hightlighted',
            option: option
        });
    });

</script>


<script>

    var chart;
    var myChart;
    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {
        var data = [];
        for (var i = 0; i < 30; i++) {
            data.push({name: i + '', value: Math.random()});
        }

        var option = {
            tooltip: {},
            legend: {
                type: 'scroll',
                selector: true,
                top: 10,
                left: 0,
                data: echarts.util.map(data, function (item) {
                    return {
                        name: item.name,
                        icon: 'circle'
                    };
                })
            },
            series: [{
                type: 'pie',
                data: data
            }]
        };

        testHelper.create(echarts, 'icon-circle', {
            title: 'The first icon should not be overflow',
            option: option
        });
    });

</script>


<script>

    var chart;
    var myChart;
    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {
        var data = [];
        for (var i = 0; i < 6; i++) {
            data.push({name: i + '哈哈哈嘿嘿嘿', value: Math.random()});
        }

        var option = {
            tooltip: {},
            legend: {
                type: 'scroll',
                top: 10,
                left: 50,
                width: 105,
                data: echarts.util.map(data, function (item) {
                    return {
                        name: item.name,
                        icon: 'circle'
                    };
                })
            },
            series: [{
                type: 'pie',
                radius: 20,
                label: {show: false},
                labelLine: {show: false},
                data: data
            }]
        };

        testHelper.create(echarts, 'only-single-item', {
            title: 'Page up/down should be normal when only single item displayed',
            option: option,
            draggable: true
        });
    });

</script>


<script>
    require([
        'echarts',
    ], function (echarts) {
        var data = [];
        for (var i = 0; i < 26; i++) {
            var name = '';
            var nameNumber = Math.floor(Math.random() * 10);
            for (var j = 0; j < nameNumber; j++) {
                name += j;
            }
            data.push({
                name: name,
                value: Math.random()
            });
        }

        var option = {
            legend: [{
                type: 'scroll',
                selector: true,
                itemGap: 30,
                backgroundColor: 'rgba(0,100,50,0.2)'
            }],
            tooltip: {},
            grid: {
                left: 280
            },
            series: {
                type: 'pie',
                label: {show: false},
                labelLine: {show: false},
                radius: 30,
                data: data
            }
        };

        testHelper.create(echarts, 'vary-size', {
            option: option,
            draggable: true
        });
    })
</script>


<script>
    require([
        'echarts',
    ], function (echarts) {

        var seriesInfo = makeSeries(50, 3);
        var series = seriesInfo.series.slice();
        series.shift();

        var option = {
            legend: [{
                type: 'scroll',
                selector: true,
                data: seriesInfo.legendData
            }],
            tooltip: {},
            xAxis: {
                data: seriesInfo.xAxisData
            },
            yAxis: {},
            series: series
        };

        testHelper.create(echarts, 'index-to-no-name', {
            option: option,
            title: [
                'Pager should be OK when legend 0 (legendData index 0) is not be displayed.',
                'should be at **page 1** at the beginning'
            ],
            draggable: true
        });
    })
</script>


</body>
</html>
